
import { Component } from "react";
import type { ReactNode } from 'react'


export default class App extends Component {

    // 普通函数无法获取 this 但是可以被调用
    btn2() {
        console.log('btn2' + this);
    }
    // 可以获取 this
    btn3 = () => {
        console.log('btn3', this);
    }

    // 普通函数通过 this 调用可以正常使用 this
    btn4() {
        console.log('btn4', this);
    }

    // 可以获取 this
    btn5 = () => {
        console.log('btn5', this);
    }



    render(): ReactNode {
        return <>
        <button onClick={()=>{
             console.log('按钮1点击了' + this);
        }}>按钮1</button>
        <button onClick={this.btn2}>按钮2</button>
        <button onClick={this.btn3}>按钮3</button>
        <button onCanPlay={()=>{
            this.btn4
        }}>按钮4</button>
        <button onClick={()=>{
            this.btn5()
        }}>按钮5</button>
        <button onClick={function (){
            // this 无法使用
            console.log('btn6');
        }}>按钮6</button>
        </>
    }
}